<template>
  <div class="login">
    <span class="close-btn">
      <i class="iconicon-test iconfont"></i>
    </span>
    <!-- 2.0 Logo 图标 -->
    <h2 class="logo">
      <i class="iconnew iconfont"></i>
    </h2>
    <Mylnput
      v-model="user.username"
      :rules="rules.username"
      placeholder="用户名/手机号码"
      msg="手机号码不合法"
    ></Mylnput>

    <Mylnput
      v-model="user.password"
      :rules="rules.password"
      type="password"
      placeholder="密码"
    ></Mylnput>
    <Mylnput
      v-model="user.nickname"
      :rules="rules.nickname"
      placeholder="昵称"
    ></Mylnput>
    <!-- 4.0 一个注册提示 -->
    <div class="tips">
      没有账号？去<router-link to="/login">登录</router-link>
    </div>
    <!-- 5.0 登录按钮 -->
    <MyButton type="danger" @click="register">注册</MyButton>
  </div>
</template>


<script>
import Mylnput from "../components/Mylnput.vue";
import MyButton from "../components/MyButton.vue";
import { userRegister } from "../apis/user";
export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        nickname: "",
      },
      rules: {
        username: /^1\d{10}$|^[a-zA-Z]\w{2,10}$|^1\d{4,5}$/,
        password: /^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/,
        nickname: /^.{2,10}$/,
      },
    };
  },
  components: {
    Mylnput,
    MyButton,
  },
  methods: {
    register() {
      if (
        this.rules.username.test(this.user.username) &&
        this.rules.password.test(this.user.password) &&
        this.rules.nickname.test(this.user.nickname)
      ) {
        userRegister(this.user).then((res) => {
          console.log(res);
          const { message } = res.data;
          if (res.data.message === "注册成功") {
            //   成功调用success图标
            this.$toast.success("注册成功，欢迎氪金");
            // 通过js方式跳转
            this.$router.push({ path: "/login" });
          } else {
            //   失败调用fail图标
            this.$toast.fail(message);
          }
        });
      } else {
        this.$toast("输入数据有误");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.close-btn {
  position: fixed;
  left: 20px;
  top: 20px;
  .iconfont {
    font-size: 20px;
    color: #666;
  }
}
.logo {
  display: flex;
  justify-content: center;
  padding: 80px 0 20px;
  .iconfont {
    color: #d81e06;
    font-size: 120px;
  }
}
.tips {
  padding: 0 30px;
  text-align: right;
}
</style>